<template>
	<div id="member-level" v-loading="loading">
		<div class="level-header">
			<div class="info-top">
				<div class="avtar">
					<img v-if="memberInfo.headimg" :src="$img(memberInfo.headimg)" @error="memberInfo.headimg = defaultHeadImage" />
					<img v-else :src="$img(defaultHeadImage)" />
				</div>
				<div class="member-wrap">
					<div class="name member-name" v-if="memberInfo.nickname">{{memberInfo.nickname}}</div>
					<div class="uid">UID : {{memberInfo.member_id}}</div>
					<div class="level" v-if="memberInfo.member_level_name">{{ memberInfo.member_level_name }}</div>
				</div>
			</div>
		</div>
		<div class="content-level" v-if="vipObj.level_id">
			<div class="left">
				<div class="left-top">
					<img src="@/assets/images/icon/vip_bozuan_01.png" class="left-bg" alt="">
					<div class="level-name">
						<div class="h4">{{vipObj.level_name}}</div>
						<div class="h4"><span>{{vipObj.price}}</span>{{$t('commons.symbol') }}</div>
					</div>
				</div>
				<div class="title"> {{ $t('member.level.exclusiveRights') }}</div>
				<div class="row-wrap">
					<div class="row-item">
						<img class="row-icon" src="@/assets/images/icon/icon_vip_01.png" alt="">
						<div class="row-text"> {{ $t('member.level.fullRebate') }}</div>
						<div class="row-text"> {{ $t('member.level.thresholdExemption') }}</div>
					</div>
					<div class="row-item">
						<img class="row-icon" src="@/assets/images/icon/icon_vip_02.png" alt="">
						<div class="row-text"> {{ $t('member.level.tip') }}</div>
						<div class="row-text"> {{ $t('member.level.memberPrivileges') }}</div>
					</div>
					<div class="row-item">
						<img class="row-icon" src="@/assets/images/icon/icon_vip_03.png" alt="">
						<div class="row-text"> {{ $t('member.level.enjoyTheShop') }}</div>
						<div class="row-text"> {{ $t('member.level.oneStopGlobalLayout') }}</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="row-level">
					<div class="row">
						<span> {{ $t('member.level.membershipLevel') }}：</span>
						<div>{{vipObj.level_name}}</div>
					</div>
					<div class="row">
						<span> {{ $t('member.level.membershipFee') }}：</span>
						<div>{{vipObj.price}} {{$t('commons.symbol') }}</div>
					</div>
				</div>
				<div class="row-pay">
					<div class="h6"> {{ $t('member.level.paymentPassword') }}</div>
					<div class="input">
						<el-input type="password" v-model="formObj.pay_password" placeholder="$t('member.level.pleaseEnterPaymentPassword') "></el-input>
					</div>
				</div>
				<div class="r-footer">
					<div class="btn" @click="submitFn()"> {{ $t('member.level.joinMembership') }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { info, } from '@/api/member/info';
import { levelFn , subLevel } from '@/api/member/index'; 
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			memberInfo: {},
			vipObj: {},
			formObj: {
				level_id: '',
				pay_password: '',
			},
			loading: true,
		};
	},
	computed: {
		...mapGetters(['defaultHeadImage', 'defaultGoodsImage',])
	},
	created() {	
		this.getInfo();
		this.getLevel();
	},
	mounted() {

	},
	methods: {
		getInfo() {
			info()
				.then(res => {
					if (res.code == 0) {
						this.memberInfo = res.data;
					}
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
					this.$message.error(err.message);
				});
		},
		getLevel(){
			levelFn().then(res => {
				if(res.code == 0 && res.data) {
					this.vipObj = res.data;
					this.formObj.level_id = res.data.level_id;
				}
			})
		},
		submitFn(){
			if(!this.formObj.pay_password){
				return this.$message.error(this.$t('member.level.pleaseEnterPaymentPassword'))
			}
			this.loading = true;
			subLevel(this.formObj).then(res => {
				if(res.code == 0){
					this.$message.success(this.$t('member.level.submittedSuccessfully'))
					this.$router.replace({name: 'member'})
				}else {
					this.$message.error(res.message)
				}
			}).catch(err => {
				this.$message.error(err.message)
			})
		},
	}
};
</script>

<style lang="scss">
	#member-level {
		.el-input__inner {
			border: none;
			height: 42px;
		}
	}
</style>

<style scoped lang="scss">
	.level-header {
		width: 100%;
		background: #fff;
		padding: 26px 42px;
		box-sizing: border-box;
		margin-bottom: 15px;
		.info-top {
			display: flex;
			align-items: center;
			.avtar {
				width: 84px;
				height: 84px;
				margin: 20px 0 10px 0;
				border: 1px solid #e9e9e9;
				border-radius: 50%;
				overflow: hidden;
				display: block;
				cursor: pointer;
				margin-left: 21px;
				text-align: center;
				line-height: 84px;

				img {
					display: inline-block;
				}
			}
			.member-wrap {
				margin-left: 20px;
				.name {
					font-size: 18px;
					font-weight: 600;
					cursor: pointer;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.uid {
					font-size: 14px;
					color: #868686;
					line-height: 20px;
				}
				.growth {
					display: flex;
					align-items: center;
				}
				.el-progress {
					width: 100px;
				}
				.level {
					padding: 4px 6px;
					line-height: 1;
					color: #ffffc1;
					margin: 6px 0;
					cursor: default;
					background: linear-gradient(#636362, #4e4e4d);
					border-radius: 3px;
					display: inline-block;
				}
			}
		}
	}

	.content-level {
		width: 100%;
		background: #fff;
		padding: 22px 42px;
		box-sizing: border-box;
		display: flex;
		// align-items: center;
		.left {
			padding-right: 45px;
			border-right: 1px solid #E8EDF5;
			.left-top {
				width: 343px;
				height: 136px;
				position: relative;
				margin-bottom: 18px;
				img {
					width: 343px;
					height: 136px;
				}
				.level-name {
					position: absolute;
					left: 23px;
					top: 21px;
					.h4 {
						font-size: 16px;
						font-weight: 600;
						color: #23575E;
						line-height: 22px;
						margin-bottom: 12px;
						span {
							font-size: 24px;
							margin-right: 6px;
						}
					}
				}
			}
			.title {
				font-size: 16px;
				font-weight: 600;
				color: #282828;
				line-height: 22px;
				margin-bottom: 20px;
			}
			.row-wrap {
				display: grid;
				grid-template-columns: 1fr 115px 1fr;
				grid-column-gap: 40px;
				.row-item {
					text-align: center;
					.row-icon {
						width: 46px;
						height: 46px;
						margin-bottom: 10px;
					}
					.row-text {
						font-size: 12px;
						font-weight: 500;
						color: #565F6C;
						line-height: 20px;
					}
				}
			}
		}
		.right {
			padding-left: 58px;
			flex: 1;
			.row-level {
				margin-bottom: 20px;
				.row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 13px;
					font-weight: 600;
					margin-bottom: 12px;
					span {
						color: #92969E;
					}
					div {
						color: #282828;
					}
				}
			}
			.row-pay {
				.h6 {
					font-size: 12px;
					color: #868686;
					margin-bottom: 12px;
				}
				.input {
					width: 100%;
					height: 46px;
					border-radius: 5px;
					border: 1px solid #DCDFE6;
					box-sizing: border-box;
				}
			}
			.r-footer {
				padding-top: 82px;
				width: 100%;
				.btn {
					cursor: pointer;
					width: 100%;
					height: 38px;
					background: #444F5F;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
